<template>
  <div class="container">
    <div class="title">
      <span>余额表</span>
      <el-date-picker
        v-model="monthRange"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        value-format="YYYY-MM"
        @change="getBalance"
      >
      </el-date-picker>
    </div>
    <div v-for="item in monthEve" :key="item.keyMonth">
      <span class="tableTitle"
        >期间:{{ item.keyData[0].period_start }}至{{
          item.keyData[0].period_end
        }}</span
      >
      <el-table
        :data="item.keyData"
        row-key="balance_id"
        border
        width="100%"
        height="780"
        stripe
      >
        <el-table-column
          prop="account_code"
          label="科目代码"
          width="180px"
          align="center"
        />
        <el-table-column prop="account_name" label="科目名称" align="center" />
        <el-table-column label="期初余额" align="center">
          <el-table-column
            prop="beginning_debit"
            label="借方"
            width="180px"
            align="center"
          />
          <el-table-column
            prop="beginning_credit"
            label="贷方"
            align="center"
          />
        </el-table-column>
        <el-table-column label="本期发生额" align="center">
          <el-table-column
            prop="current_debit"
            label="借方"
            width="180px"
            align="center"
          />
          <el-table-column prop="current_credit" label="贷方" align="center" />
        </el-table-column>
        <el-table-column label="期末余额" align="center">
          <el-table-column
            prop="ending_debit"
            label="借方"
            width="180px"
            align="center"
          />
          <el-table-column prop="ending_credit" label="贷方" align="center" />
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getBalanceList } from "@/api/getList";
import { ElMessage } from "element-plus";
const monthRange = ref([]);
const tempArr = ref([]);
const tableData = ref();
const monthEve = ref([]);
monthRange.value[0] = history.state.startMonth;
monthRange.value[1] = history.state.endMonth;
const getBalance = () => {
  tempArr.value = [];
  getBalanceList({
    start_month: monthRange.value[0],
    end_month: monthRange.value[1],
  }).then((res) => {
    if (Object.keys(res.data).length === 0) {
      ElMessage.error("文件不存在，请上传！");
    } else {
      monthEve.value = [];
      for (const key in res.data) {
        res.data[key].forEach((item, index) => {
          if (item.code_suffix === "") {
            item.children = [];
            tempArr.value.push(item);
          }
        });
        tempArr.value.forEach((i) => {
          res.data[key].forEach((j) => {
            if (i.account_code === j.account_code && j.code_suffix !== "") {
              i.children.push(j);
            }
          });
        });
        res.data[key] = tempArr.value;
        monthEve.value.push({
          keyMonth: key,
          keyData: res.data[key],
        });
      }
    }
  });
  tableData.value = tempArr.value;
};
onMounted(() => {
  getBalance();
});
</script>

<style lang="less" scoped>
.container {
  height: calc(100vh - 142px);
  background: @mainColor;

  .title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  span {
    margin: 1vw;
  }
}
.tableTitle {
  display: inline-block;
  margin: 1vh;
  font-size: 1.2vw;
}
:deep(.title) {
  width: 25vw;
}
</style>
